@import "base.less";

@vw: 3.75vw;
body {
  background-color: #f9fafb;
}

/* 头部 */
header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff;
  padding: 0 (15 /@vw);
  width: (375/@vw);
  height: (50/@vw);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    width: (234/@vw);
    height: (50/@vw);
    background-image: url(../assets/head.png);
    /* 图片保持比例放大或缩小填充容器，宽或高其中一个填充容器以后就不缩放了 */
    background-size: contain;
    background-repeat: no-repeat;
  }

  a {
    width: (80 /@vw);
    height: (30 /@vw);
    background-color: #ffe31b;
    border-radius: (40 / @vw);
    text-align: center;
    line-height: (30 / @vw);
    font-size: (14 / @vw);
  }
}

/* 搜索区域 */
.search {
  margin-top: (50 / @vw);
  height: (52/@vw);
  padding: (10/@vw) (15/@vw);

  .text {
    height: 100%;
    background-color: #f2f4f5;
    border-radius: (26/ @vw);
    text-align: center;
    line-height: (32 /@vw);
    color: #a1a4b3;
    font-size: (14 /@vw);

    .icon-search {
      font-size: (17 /@vw);
    }
  }
}

/* banner图 */
.banner {
  height: (108 / @vw);
  padding: 0 (15 /@vw);

  ul li {
    height: (108 / @vw);

    a {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        border-radius: (6 /@vw);
        /* cover完全覆盖，缩放img，图片比例跟父级盒子比例不同，避免图片挤压变形 */
        object-fit: cover;
      }
    }
  }
}

/* title公共样式 */
.title {
  display: flex;
  height: (26 /@vw);
  margin-bottom: (16 / @vw);
  justify-content: space-between;
  align-items: center;

  h4 {
    font-size: (20 / @vw);
  }

  a {
    color: #a1a4b3;
    font-size: (12 / @vw);

    .icon-right {
      font-size: (16 / @vw);

    }
  }
}

/* 排行榜 */
.list {
  margin-top: (20 / @vw);
  padding: 0 (15 /@vw);

  .content li {
    background-color: #ffffff;
    width: (345 / @vw);
    height: (105 / @vw);
    border-radius: (10 / @vw);
    display: flex;
    margin-bottom: (16 / @vw);

    img {
      width: (105 / @vw);
      border-radius: (10 / @vw);
      margin-right: (20 / @vw);
    }

    div a {
      display: block;
      color: #a1a4b3;
      font-size: (12 / @vw);
      line-height: 1.8;

      &:nth-child(1) {
        color: #333;
        font-size: (14 / @vw);
      }
    }
  }
}

/* 推荐歌单 */
.recommend {
  padding: 0 (15 / @vw);

  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: (105/@vw);
      height: (143/@vw);
      margin-bottom: (16 / @vw);

      .pic {
        width: (105/@vw);
        height: (105/@vw);
        position: relative;

        img {
          border-radius: (10 / @vw);
          width: 100%;
          height: 100%;
        }

        .cover {
          width: (70 / @vw);
          height: (28 / @vw);
          background-color: rgba(0, 0, 0, 0.6);
          text-align: center;
          line-height: (28 / @vw);
          bottom: 0;
          left: 0;
          position: absolute;
          color: #FFF;
        }
      }
    }
  }
}

/* 下载 */
.download {
  margin: 0 (15 / @vw);
  height: (45 / @vw);
  width: (345 / @vw);
  background-color: #ffffff;
  padding: 0 (10 / @vw) 0 (15/ @vw);
  border-radius: (45 / @vw);
  position: fixed;
  left: 0;
  bottom: ( 30/ @vw);
  display: flex;
  align-items: center;
  img {
    width: (36 / @vw);
    height: (36 / @vw);
    margin-right: (10 / @vw);
  }
  p{
    flex: 1;
  }
  a {
    width: (32 / @vw);
    height: (32 / @vw);
    text-align: center;
    background-color: #f2f3f5;
    border-radius: (32 / @vw);
    line-height: (32 / @vw);
  }
}
